<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true">
                <el-form-item label="实名时间">
                    <picker-datetime-range v-model="search.created_at"></picker-datetime-range>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="search.status" clearable style="width: 120px;">
                        <el-option v-for="(item, index) in options.realNameStatus" :key="index" :label="item" :value="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="姓名" prop="truename">
                    <el-input class="filter-item" type="textarea" autosize v-model="search.truename" placeholder="多个使用回车换行"/>
                </el-form-item>
                <el-form-item label="身份证号码" prop="idcard">
                    <el-input class="filter-item" type="textarea" autosize v-model="search.idcard" placeholder="多个使用回车换行"/>
                </el-form-item>
                <el-form-item label="玩家ID" prop="playerId">
                    <el-input class="filter-item" type="textarea" autosize v-model="search.playerId" placeholder="多ID使用回车换行"/>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="pageNo = 1;handleSearch()">搜索</el-button>
                    <el-button class="filter-item" @click="exportExcel" v-if="$ENABLE_EXPORT">导出本页</el-button>
                </el-form-item>
            </el-form>
        </div>

        <vxe-table
            :loading="loading"
            ref="xTable"
            highlight-hover-row
            style="width: 100%"
            class="text-center"
            :row-class-name="tableRowClassName"
            :max-height="maxHeight">
            <vxe-table-column title="用户ID" field="user_id" min-width="100"/>
            <vxe-table-column title="玩家ID" field="account.playerId" min-width="100"/>
            <vxe-table-column title="昵称" field="account.nickname" min-width="120"/>
            <vxe-table-column title="真实姓名" field="truename" min-width="120"/>
            <vxe-table-column title="身份证" field="idcard" min-width="150"/>
            <vxe-table-column title="生日" field="birthday" min-width="100"/>
            <vxe-table-column title="状态" field="status" type="html" min-width="80">
                <template slot-scope="scope">{{ options.realNameStatus[scope.row.status] }}</template>
            </vxe-table-column>
            <vxe-table-column title="Fake" field="is_fake" formatter="formatBoolText" width="80"/>
            <vxe-table-column title="创建时间" field="created_at" width="140"/>
            <vxe-table-column title="更新时间" field="updated_at" width="140"/>
        </vxe-table>

        <el-pagination
            class="pull-right clearfix"
            background
            :current-page.sync="pageNo"
            :page-sizes="pageOptions.pageSizesList"
            :page-size="pageSize"
            :layout="pageOptions.layout"
            :total="totalDataNumber"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>

    </div>
</template>

<script>

export default {
    data() {
        return {
            search: {
                created_at: [],
                playerId: '',
                truename: '',
                idcard: '',
                status: '',
            },
            loading: false,
            pageNo: 1,
            pageSize: 20,
            totalDataNumber: 0,
            downloadLoading: false,
            pageOptions: this.$store.state.backend.pageOptions,
            pageCount: 0,
            options: this.$store.state.user.options,
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 210;
        },
    },
    watch: {

    },
    methods: {
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSelectionChange(val) {
            this.selected = val;
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            // 简单去重
            if (filter.playerId) {
                filter.playerId = Array.from(new Set(
                    filter.playerId.split('\n').filter(v=>v).filter(v => !isNaN(Number(v)))
                ));
            }
            if (filter.truename) {
                filter.truename = Array.from(new Set(
                    filter.truename.split('\n').filter(v => v)
                ));
            }
            if (filter.idcard) {
                filter.idcard = Array.from(new Set(
                    filter.idcard.split('\n').filter(v => v)
                ));
            }
            this.$store.dispatch('user/RealName', filter).then(({data}) => {
                this.$refs.xTable.reloadData(data.data)
                // this.tableData = Object.freeze(data.data);
                this.totalDataNumber = data.meta.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        initSearchDate() {
            this.search.created_at = [
                moment().startOf('d').unix(),
                moment().endOf('d').unix(),
            ];
        },
        initData() {
            // this.initSearchDate();
            this.handleSearch();
        },
        tableRowClassName({row, rowIndex}) {
            // if (row.status === 1) return 'color-success';
        },
        exportExcel () {
            this.$refs.xTable.exportData({
                filename: '实名信息',
                type: 'xlsx'
            })
        },
    },
    created() {
        if (this.$route.query.playerId) this.search.playerId = this.$route.query.playerId;
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>

